<template>
  <a-card :bordered="false">
    <a-spin :spinning="confirmLoading">
      <ants-form-container :disabled="formDisabled">
        <a-form slot="detail" :form="form">
          <a-card size="small" title="系统" :bordered="false">
            <a-row>
              <a-col :span="24">
                <a-form-item label="网站名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-decorator="['siteName', validatorRules.siteName]" placeholder="请输入网站名称"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="LOGO" :label-col="labelCol12" :wrapper-col="wrapperCol12">
                  <ants-image-upload biz-path="systemConfig" v-decorator="['logoUrl', validatorRules.logoUrl]"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="背景图" :label-col="labelCol12" :wrapper-col="wrapperCol12">
                  <ants-image-upload biz-path="systemConfig" v-decorator="['backgroundUrl']"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card size="small" title="管理员" :bordered="false">
            <a-row>
              <a-col :span="24">
                <a-form-item label="管理员名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-decorator="['adminName', validatorRules.adminName]" placeholder="请输入管理员名称"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="管理员头像" :label-col="labelCol12" :wrapper-col="wrapperCol12">
                  <ants-image-upload biz-path="systemConfig" v-decorator="['adminAvatarUrl', validatorRules.adminAvatarUrl]"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="管理员背景" :label-col="labelCol12" :wrapper-col="wrapperCol12">
                  <ants-image-upload biz-path="systemConfig" v-decorator="['adminBackgroundUrl', validatorRules.adminBackgroundUrl]"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="管理员描述" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-textarea :rows="3" v-decorator="['adminDescribe', validatorRules.adminDescribe]" placeholder="请输入描述"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card size="small" title="恋爱" :bordered="false">
            <a-row>
              <a-col :span="24">
                <a-form-item label="恋爱时间" :label-col="labelCol" :wrapper-col="labelCol">
                  <ants-date v-decorator="['loveDate', validatorRules.adminDescribe]" placeholder="请选择恋爱时间" :trigger-change="true" style="width: 100%"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="男方头像" :label-col="labelCol12" :wrapper-col="wrapperCol12">
                  <ants-image-upload biz-path="systemConfig" v-decorator="['manAvatarUrl', validatorRules.manAvatarUrl]"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="女方头像" :label-col="labelCol12" :wrapper-col="wrapperCol12">
                  <ants-image-upload biz-path="systemConfig" v-decorator="['womanAvatarUrl', validatorRules.womanAvatarUrl]"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card size="small" title="其他" :bordered="false">
            <a-row>
              <a-col :span="12">
                <a-form-item label="备案号" :label-col="labelCol12" :wrapper-col="wrapperCol12">
                  <a-input v-decorator="['recordNum', validatorRules.recordNum]" placeholder="请输入备案号"/>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="是否可登录" :label-col="labelCol12" :wrapper-col="wrapperCol12">
                  <ants-dict-select-tag
                    type="radioButton"
                    :trigger-change="true"
                    v-decorator="['isLogin', validatorRules.isLogin]"
                    placeholder="请选择是否可登录"
                    dict-code="yn"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-form>
      </ants-form-container>
      <a-col :span="24" style="text-align: center;margin-bottom: 20px">
        <a-button key="back" @click="handleEdit" v-if="this.formDisabled">
          编 辑
        </a-button>
        <a-button style="margin-left: 20px" key="submit" type="primary" @click="handleSave" v-else>
          保 存
        </a-button>
      </a-col>
    </a-spin>
  </a-card>
</template>

<script>
import AntsFormContainer from '@/components/ants/AntsFormContainer'
import pick from 'lodash.pick'
import { getAction, httpAction } from '@/api/manage'
import AntsImageUpload from '@/components/ants/AntsImageUpload'
import AntsDictSelectTag from '@/components/dict/AntsDictSelectTag'
import AntsDate from '@/components/ants/AntsDate'

export default {
  name: 'FriendLinks',
  components: {
    AntsDate,
    AntsFormContainer,
    AntsImageUpload,
    AntsDictSelectTag
  },
  data() {
    return {
      form: this.$form.createForm(this),
      model: {},
      labelCol12: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol12: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      validatorRules: {
        siteName: {
          rules: [
            { required: true, message: '请输入网站名称!' }
          ]
        },
        logoUrl: {
          rules: [
            { required: true, message: '请上传LOGO!' }
          ]
        },
        backgroundUrl: {
          rules: [
            { required: true, message: '请上传背景图!' }
          ]
        },
        adminName: {
          rules: [
            { required: true, message: '请输入管理员名称!' }
          ]
        },
        adminAvatarUrl: {
          rules: [
            { required: true, message: '请上传管理员头像!' }
          ]
        },
        adminBackgroundUrl: {
          rules: [
            { required: true, message: '请上传管理员背景!' }
          ]
        },
        adminDescribe: {
          rules: [
            { required: true, message: '请输入描述!' }
          ]
        },
        loveDate: {
          rules: [
            { required: true, message: '请选择恋爱时间!' }
          ]
        },
        manAvatarUrl: {
          rules: [
            { required: true, message: '请上传男方头像!' }
          ]
        },
        womanAvatarUrl: {
          rules: [
            { required: true, message: '请上传女方头像!' }
          ]
        },
        recordNum: {
          rules: [
            { required: true, message: '请输入备案号!' }
          ]
        },
        isLogin: {
          rules: [
            { required: true, message: '请选择是否可登录!' }
          ]
        },
      },
      url: {
        list: '/antsSystemConfig/list',
        add: '/antsSystemConfig/add',
        edit: '/antsSystemConfig/edit'
      },
      confirmLoading: false,
      formDisabled: true
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      getAction(this.url.list, {}).then(res => {
        if (res.success) {
          this.form.resetFields()
          this.model = Object.assign({}, res.result)
          this.visible = true
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model, 'siteName', 'logoUrl', 'backgroundUrl', 'adminName', 'adminDescribe',
              'adminBackgroundUrl', 'adminAvatarUrl', 'loveDate', 'manAvatarUrl', 'womanAvatarUrl', 'recordNum', 'isLogin'))
          })
        }
      })
    },
    handleEdit() {
      this.formDisabled = false
      this.$message.success('可以开始操作了！')
    },
    handleSave() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          const formData = Object.assign(this.model, values)
          var url = ''
          var method = ''
          if (!this.model.id) {
            url = that.url.add
            method = 'post'
          } else {
            url = that.url.edit
            method = 'put'
          }
          httpAction(url, method, formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              this.formDisabled = true
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
          })
        }
      })
    }
  }
}
</script>
